<template>
  <!-- 定时器 -->
  <div class="loadingClass" v-loading="worldLoading" element-loading-text="计算倒计时中">
    <div class="world">
      <div class="wholeCotainer">
        <div class="header">
          <div></div>
          <div class="title">
            <span>自定义倒计时</span>
          </div>
          <div class="config" @click="openDrawer">
            <el-tooltip effect="dark" content="配置时间" placement="top">
              <i class="el-icon-s-tools"></i>
            </el-tooltip>
          </div>
        </div>
        <div class="content">
          <h2>{{ surplusTime }}</h2>
        </div>
      </div>
    </div>
    <el-drawer
      title="配置时间"
      :visible.sync="drawerVisible"
      direction="rtl"
      @close="handleClose"
      :size="324"
      :modal-append-to-body="false"
    >
      <div class="timerDrawer">
        <el-form :model="form" label-width="100px" label-position="top">
          <el-form-item label="日期">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.date"
              style="width: 100%"
              value-format="yyyy-MM-dd"
              :clearable="false"></el-date-picker>
          </el-form-item>
          <el-form-item label="时间">
            <el-time-picker
              placeholder="选择时间"
              v-model="form.time"
              style="width: 100%"
              value-format="HH:mm:ss"
              :clearable="false"></el-time-picker>
          </el-form-item>
        </el-form>
        <div>
          <el-button type="primary" @click="onSubmit">重新计算</el-button>
          <el-button @click="drawerVisible = false">取消</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import moment from "moment";
  export default {
    name: "CountDown",
    data() {
      return {
        worldLoading: false,
        drawerVisible: false,
        surplusTime: "",
        defaultDate: moment().add(1, "years").format("YYYY") + "-01-01",
        defaultTime: "00:00:00",
        form: {
          date: moment().add(1, "years").format("YYYY") + "-01-01",
          time: "00:00:00",
        },
        timer: null,
        isClicked: false,
      };
    },
    mounted() {
      this.setTimer();
    },
    beforeDestroy() {
      this.clearTimer();
    },
    methods: {
      openDrawer() {
        this.drawerVisible = true;
      },
      handleClose() {
        this.drawerVisible = false;
      },
      setTimer(d, t) {
        this.clearTimer();
        this.worldLoading = true
        if (this.isClicked) {
          this.timer = setInterval(() => {
            let time = (moment(d + " " + t) - moment()) / 1000;
            let day = Math.floor(time / (24 * 60 * 60));
            let hour = Math.floor((time % (24 * 60 * 60)) / (60 * 60));
            let minute = Math.floor(((time % (24 * 60 * 60)) % (60 * 60)) / 60);
            let second = Math.floor(((time % (24 * 60 * 60)) % (60 * 60)) % 60);
            this.surplusTime =
              "距离" +
              d +
              " " +
              t +
              "还剩\n" +
              day +
              "天" +
              hour +
              "时" +
              minute +
              "分" +
              second +
              "秒";
          }, 1000);
        } else {
          this.timer = setInterval(() => {
            let time =
              (moment(this.defaultDate + " " + this.defaultTime) - moment()) /
              1000;
            let day = Math.floor(time / (24 * 60 * 60));
            let hour = Math.floor((time % (24 * 60 * 60)) / (60 * 60));
            let minute = Math.floor(((time % (24 * 60 * 60)) % (60 * 60)) / 60);
            let second = Math.floor(((time % (24 * 60 * 60)) % (60 * 60)) % 60);
            this.surplusTime =
              "距离" +
              this.defaultDate +
              " " +
              this.defaultTime +
              "还剩\n" +
              day +
              "天" +
              hour +
              "时" +
              minute +
              "分" +
              second +
              "秒";
          }, 1000);
        }
        setTimeout(() => {
          this.worldLoading = false
        }, 700)
      },
      onSubmit() {
        if(this.form.date == "" || this.form.date == null) {
          this.$message.warning("请选择日期")
          return
        }
        if(this.form.time == "" || this.form.time == null) {
          this.form.time = "00:00:00"
        }
        if (!this.isClicked) {
          this.isClicked = true;
        }
        this.setTimer(this.form.date, this.form.time);
      },
      clearTimer() {
        if (this.timer) {
          clearInterval(this.timer);
        }
        this.timer = null;
      },
    },
  };
</script>

<style lang="less" scoped>
  .loadingClass {
    width: 100%;
    height: 100%;
    overflow: hidden;
    .world {
      width: 100%;
      height: 100%;
      overflow-x: hidden;
      overflow-y: auto;
      .wholeCotainer {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        min-height: 240px;
        .header {
          width: 100%;
          height: 80px;
          display: flex;
          justify-content: space-around;
          align-items: center;
          background-color: #f9ded2;
          .title {
            font-size: 24px;
            letter-spacing: 4px;
          }
          .config {
            font-size: 40px;
            cursor: pointer;
          }
        }
        .content {
          width: 100%;
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 16px;
          white-space: pre-wrap;
          text-align: center;
          background-color: #f1f2f5;
          h2 {
            line-height: 40px;
          }
        }
      }
    }
  }

  /deep/ .el-drawer__wrapper {
    .el-drawer__body {
      .timerDrawer {
        padding: 16px;
        overflow: auto;
      }
    }
  }
</style>
